<template>
    <div>
        <el-row>
            <el-col  :gutter="20"  :span="3">
                <div class="grid-content bg-purple">
                 <div class="slide-left">
                        <el-menu  :default-active="$route.path" class="el-menu-vertical-demo"
                            background-color="#545c64" @select="handleSelect"
                            text-color="#fff" active-text-color="#ffd04b">
                             <el-submenu index="/nav/user/testSystem">
                                <template slot="title">
                                <i class="el-icon-message"></i>
                                <span>日考系统</span>
                                </template>
                                <el-menu-item-group>
                                <el-menu-item index="/nav/user/testSystem/teacher">讲师模块</el-menu-item>
                                <el-menu-item index="/nav/user/testSystem/student">学生模块</el-menu-item>
                                </el-menu-item-group>
                                <el-menu-item index="/nav/user/testSystem/grade">成绩统计</el-menu-item>
                            </el-submenu>
                            <el-menu-item index="/nav/user/form">
                            <i class="el-icon-menu"></i>
                            <span slot="title">用户列表</span>
                            </el-menu-item>
                            <el-menu-item index="/nav/user/addUser">
                            <i class="el-icon-setting"></i>
                            <span slot="title">新增用户</span>
                            </el-menu-item>
                        </el-menu>
                    </div>
                </div>
            </el-col>
            <el-col :span="20"><div class="grid-content bg-purple-light">
                 <router-view></router-view>
                </div></el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        methods: {
            // handleOpen(key, keyPath) {
            // console.log(key, keyPath);
            // },
            // handleClose(key, keyPath) {
            //     console.log(key, keyPath);
            // },
            handleSelect(key, keyPath){
                this.$router.push(key)
            }
    }
  } 
</script>

<style scoped>
.slide-left{
    width: 170px;
    height: 100%;
}
</style>